<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijgauge.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijradialgauge.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#gauge").wijradialgauge({
				value: 100,
				max: 150,
				min: 0,
				startAngle: -45,
				sweepAngle: 270,
				radius: "auto",
				islogarithmic: true,
				origin: {
					x: 0.5, y: 0.5
				},
				labels: {
					offset: 27, 
					style: {
						fill: "#1E395B",
						"font-size": 12,
						"font-weight": "800"
					}
				},
				tickMinor: {
					position: "inside",
					offset: 30,
					style: {
						"height": 3,
						"width": 10,
						fill: "#1E395B",
						stroke: "#E7EFF8"
					},
					interval: 5,
					visible: true
				},
				tickMajor: {
					position: "inside",
					offset: 27,
					style: {
						fill: "#1E395B",
						"height": 4,
						"width": 20,
						stroke: "#E7EFF8",
						"stroke-width": 1.5
					},
					interval: 25,
					visible: true
				},
				ranges: [
				{
					startWidth: 2,
					endWidth: 5,
					startValue: 0,
					endValue: 10,
					startDistance: 0.6,
					endDistance: 0.58,
					style: {
						fill: "#7BA0CC",
						stroke: "#7BA0CC",
						"stroke-width": 0
					}
				},
				{
					startWidth: 5,
					endWidth: 20,
					startValue: 10,
					endValue: 125,
					startDistance: 0.58,
					endDistance: 0.54,
					style: {
						fill: "0-#B4D5F0-#B4D5F0",
						stroke: "#FFFFFF",
						"stroke-width": 0
					}
				},
				{
					startWidth: 20,
					endWidth: 25,
					startValue: 125,
					endValue: 150,
					startDistance: 0.54,
					endDistance: 0.5,
					style: {
						fill: "#7BA0CC",
						stroke: "#7BA0CC",
						"stroke-width": 0
					}
				}
				],
				face: {
					style: {

						fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0",
						stroke: "#7BA0CC",
						"stroke-width": 4
					}
				},
				pointer: {
					length: 0.8,
					offset: 0,
					shape: "rect",
					width: 6,
					style: {
						fill: "#1E395B",
						stroke: "#1E395B"
					}
				},
				cap: {
					radius: 10,
					style: {
						fill: "#1E395B",
						stroke: "#1E395B"
					}
				}
			});
			$("#checkbox1").change(function () {
				$("#gauge").wijradialgauge("option", "islogarithmic", $(this).is(":checked"));
			});
		});
	
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Logarithmic</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="gauge"></div>
			 <!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<input type="checkbox" id="checkbox1" checked="checked" />
				<label for="checkbox1">IsLogarithmic</label>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>This sample shows how to set non-uniform tick marks using the islogarithmic and logarithmicBase options.</p>
		</div>
	</div>
</body>
</html>
